iT邦幫忙

2024 iThome 鐵人賽

DAY 14
0
Modern Web

React 學得動嗎系列 第 14

[Day 14] React 生態系:React Query 和 React Hook Form

  • 分享至 

  • xImage
  •  

今天我們要來聊聊 React 生態系中的兩個實用的套件:React QueryReact Hook Form

React Query:

React Query 是一個用於管理伺服器狀態的強大工具。它可以幫助你輕鬆處理資料獲取、快取和更新等操作。

React Query 的主要特點:

  1. 自動快取和重新獲取:自動管理資料的快取和更新。
  2. 背景更新:在背景中自動更新資料,保持UI的即時性。
  3. 分頁和無限捲動支援:輕鬆實現分頁和無限捲動功能。
  4. 樂觀更新:在伺服器響應之前,先更新UI,提升使用者體驗。

來看個簡單的例子:

import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts').then(res => res.json());
}

function PostList() {
  const { data, isLoading, error } = useQuery('posts', fetchPosts);

  if (isLoading) return <div>載入中...</div>;
  if (error) return <div>哎呀!出錯了</div>;

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

在這個例子中,React Query 幫我們處理了載入狀態、錯誤處理和資料快取。簡單幾行程式碼,就可以實現了一個功能完整的資料獲取邏輯。

React Hook Form:

React Hook Form 是一個用於處理表單的輕量級函式庫。它使用 React Hooks 的力量,讓表單處理變得簡單。

React Hook Form 的主要特點:

  1. 效能優化:最小化重新渲染,提升表單效能。
  2. 易於使用:API 簡單直觀,學習曲線平緩。
  3. 靈活的驗證:支援多種驗證方式,包括自定義驗證。
  4. 無依賴:輕量級,不依賴其他函式庫。

來看個實際的例子:

import { useForm } from 'react-hook-form';

interface FormData {
  username: string;
  email: string;
  password: string;
}

function SignUpForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<FormData>();

  const onSubmit = (data: FormData) => {
    console.log(data);
    // 這裡可以處理表單提交邏輯
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username", { required: "使用者名稱是必填的" })} placeholder="使用者名稱" />
      {errors.username && <span>{errors.username.message}</span>}

      <input {...register("email", { required: "電子郵件是必填的", pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: "無效的電子郵件地址"
      }})} placeholder="電子郵件" />
      {errors.email && <span>{errors.email.message}</span>}

      <input type="password" {...register("password", { required: "密碼是必填的", minLength: {
        value: 8,
        message: "密碼至少需要8個字元"
      }})} placeholder="密碼" />
      {errors.password && <span>{errors.password.message}</span>}

      <button type="submit">註冊</button>
    </form>
  );
}

在這個例子中,React Hook Form 幫我們處理了表單的狀態管理、驗證和提交。它的 API 非常直觀,讓表單處理變得很輕鬆。

這兩個套件如何改善我們的開發體驗?

  1. React Query

    • 減少了手動管理資料獲取狀態的麻煩。
    • 自動處理快取,提升應用程式效能。
    • 提供了強大的工具來處理複雜的資料獲取場景。
  2. React Hook Form

    • 簡化了表單處理邏輯,減少樣板程式碼。
    • 提升表單效能,減少不必要的重新渲染。
    • 內建強大的驗證功能,節省了大量自行實作的時間。

小結

今天我們嘗試了 React 生態系中的兩個好用的工具:React Query 和 React Hook Form。這兩個套件分別解決了資料獲取和表單處理這兩個常見的開發痛點。

如果想更了解這兩個套件,可以參考它們的官方文件:


上一篇
[Day 13] React 狀態管理介紹:Redux、MobX 和Zustand
下一篇
[Day 15] React如何規劃專案結構
系列文
React 學得動嗎30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言